<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>酒店基础信息维护</title>
    <link href="/resources/hotel/css/style.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="/resources/hotel/js/jquery.js"></script>

    <script type="text/javascript">
        $(document).ready(function () {
            $(".click").click(function () {
                $(".tip").fadeIn(200);
            });

            $(".tiptop a").click(function () {
                $(".tip").fadeOut(200);
            });

            $(".sure").click(function () {
                $(".tip").fadeOut(100);
            });

            $(".cancel").click(function () {
                $(".tip").fadeOut(100);
            });

        });
    </script>
</head>
<body>
<div class="place">
    <span>位置：</span>
    <ul class="placeul">
        <li><a href="#">酒店信息管理</a></li>
        <li><a href="#">房间类型管理</a></li>
    </ul>
</div>
<form id="basicInfoForm">
    <div class="rightinfo">
        <div class="formtitle"><span>基本信息</span></div>
        <div class="tools">
            <ul class="toolbar">
                <li><span><img src="/resources/hotel/images/t01.png"/></span><label class="insert">添加</label></li>
            </ul>
        </div>
        <table class="tablelist" style="width: 700px">
            <thead>
            <tr>
                <th>类型名称<i class="sort"><img src="/resources/hotel/images/px.gif"/></i></th>
                <th>类型描述</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody id="tobody">
            </tbody>
        </table>
    </div>
</form>
<div class="tip" id="modifyDiv" style="height: 500px;">
    <div class="tiptop"><span>提示信息</span><a></a></div>
    <div class="tipinfo">
        <span><img src="/resources/hotel/images/ticon.png"/></span>
        <div class="tipright">
            <p>类型名称：</p><input name="" type="text" class="dfinput" id="trName"/>
            <p>类型描述：</p><input name="" type="textarea" class="dfinput" id="trDesc"/>
        </div>
    </div>
    <div class="tipbtn" style="margin-top: 200px;">
        <input name="" type="button" class="sure" value="确定修改" id="modifyOK"/>&nbsp;
        <input name="" type="button" class="cancel" value="取消"/>
    </div>
</div>
<div class="tip" id="insertDiv" style="height: 500px;">
    <div class="tiptop"><span>提示信息</span><a></a></div>
    <div class="tipinfo">
        <span><img src="/resources/hotel/images/ticon.png"/></span>
        <div class="tipright">
            <p>类型名称：</p><input name="" type="text" class="dfinput" id="addtrName"/>
            <p>类型描述：</p><input name="" type="textarea" class="dfinput" id="addtrDesc"/>
        </div>
    </div>
    <div class="tipbtn" style="margin-top: 200px;">
        <input name="" type="button" class="sure" value="确定添加" id="insertok"/>&nbsp;
        <input name="" type="button" class="cancel" value="取消"/>
    </div>
</div>
<script type="text/javascript">
    $('.tablelist tbody tr:odd').addClass('odd');
</script>
<script type="text/javascript">
    //获取房间类型数据的请求
    $.ajax({
        type: "post",
        url: "http://localhost:8080/roomTypeController/queryRoomTypeByHid",
        datatype: "json",
        success: function (data) {
            console.log("后台响应数据：" + data);
            var tbody = $("#tobody");
            var tr = "";
            for (var i = 0; i<data.roomTypes.length; i++) {
                var roomType = data.roomTypes[i];
                tr = "<tr>" +
                        "<td>" + roomType.rtName + "</td>" +
                        "<td>" + roomType.rtDesc + "</td>" +
                        "<td><a href='#' class='tablelink'> <label class='modify' onclick='modify("+roomType.rtId+",\""+roomType.rtName+"\",\""+roomType.rtDesc+"\")'>修改</label></a> <a href='#' class='tablelink'><label class='delete' rtId='"+roomType.rtId+"'> 删除</label></a> </td>"+
                        "</tr>";
                tbody.append(tr);
            }
            $(".delete").click(function () {
                var id = $(this).attr("rtId");
                alert(id);
                $("#deleteDiv").css("display","block");
                $("#deok").click(function () {
                    $.ajax({
                        type:"post",
                        url:"http://localhost:8080/roomTypeController/deleteRoomType",
                        data:{"rtId":id},
                        success:function (data) {
                            if(data.success){
                                alert("删除成功");
                                window.location.reload();//刷新页面
                            }else{
                                alert("删除失败");
                                window.location.reload();//刷新页面
                            }
                        },
                        error:function () {
                            alert("访问错误");
                        },
                    });
                });
                $("#deno").click(function () {
                    $("#deleteDiv").css("display","none");
                });
            });
        },
        error: function () {
            alert("访问错误！");
        }
    });
    function modify(rtId, rtName, rtDesc) {
        alert(rtId);
        // console.log(rtId,rtNmae,rtDesc);
        $("#modifyDiv").show();//显示修改框
        $("#trName").attr("placeholder", rtName);
        $("#trDesc").attr("placeholder", rtDesc);

        $("#modifyOK").click(function () {
            var newRtName = $("#trName").val();
            var newRtDesc = $("#trDesc").val();
            if (newRtName != null & newRtName != "") {
                $.ajax({
                    type: "post",
                    url: "http://localhost:8080/roomTypeController/updateRoomTypeByRoomTypeId",
                    data: {
                        "rtId": rtId,
                        "rtName": newRtName,
                        "rtDesc": newRtDesc
                    },
                    dataType: "json",
                    success: function (data) {
                        alert("成功响应！");
                        if (data.success) {
                            alert("修改成功！");
                            $("#modifyDiv").hide();//隐藏修改框
                            window.location.reload();//刷新当前页面
                        } else {
                            alert("修改失败！" + data.errMsg);
                        }
                    },
                    error: function () {
                        alert("访问错误！");
                    }
                });
            } else {
                alert("修改失败，类型名称为空或没有得到改变...");
            }
        });

    }
      //添加类型请求
    $(".insert").click(function () {
        $("#insertDiv").show();//显示添加框
        $("#insertok").click(function(){
            var addtrName = $("#addtrName").val();
            var addtrDesc = $("#addtrDesc").val();
            alert(addtrName+addtrDesc);
            if(addtrName != null & addtrName != ""&&addtrDesc!=null&addtrDesc!="") {
                $.ajax({
                    type: "post",
                    url: "http://localhost:8080/roomTypeController/addRoomType",
                    data: {
                        "rtName": addtrName,
                        "rtDesc": addtrDesc
                    },
                    dataType: "json",
                    success: function (data) {
                        if (data.success) {
                            alert("添加成功");
                            window.location.reload();//刷新页面
                        } else {
                            alert("添加失败");
                        }
                    },
                    error: function () {
                        alert("访问错误");
                    }
                });
            }else{
                alert("失败，属性不能为空");
            }
        });
    });
</script>

<!--<div style="height:400px;width: 250px;background-color: rebeccapurple;position: absolute;top:80px;left:450px;display:none;opacity: 0.9;" class="deletediv">
    <input name="" type="button" value="确定删除" id="deok">
    <input name="" type="button" value="取消删除" id="deno">
</div>-->
<!--<div class="tipbtn" style="margin-top: 200px;">
    <input name="" type="button" value="删除" id="deok"/>&nbsp;
    <input name="" type="button" value="取消删除" id="deno"/>
</div>-->

<!--//删除选项框-->
<div class="tip" id="deleteDiv" style="height: 350px;">
    <div class="tiptop"><span>提示信息</span><a></a></div>
    <div class="tipinfo">
        <span><img src="/resources/hotel/images/ticon.png" /></span>
        <div class="tipright">
            <p>是否确认对信息的删除 ？</p>
            <cite>如果是请点击确定按钮 ，否则请点取消。</cite>
        </div>
    </div>
    <div class="tipbtn" style="margin: 100px;">
        <input name="" type="button"  class="sure" value="确定" id="deok"/>&nbsp;
        <input name="" type="button"  class="cancel" value="取消" id="deno"/>
    </div>
</div>

<script type="text/javascript">

</script>
</body>
</html>
